<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
  <div class="form_box">
    <div class="title1">保洁员详情</div>

    <div class="content_box1">
      <div class="content_item1">
        <div>姓名：</div>
        <div>{$row.cleaner_name}</div>
      </div>
      <div class="content_item1">
        <div>联系电话：</div>
        <div>{$row.phone}</div>
      </div>
      <div class="content_item1">
        <div>配送评分：</div>
        <div>{$row.score}</div>
      </div>
      <div class="content_item1">
      </div>
      <div class="content_item1">
        <div>完成服务总单数：</div>
        <div>{$row.total_end_service_num}</div>
      </div>
      <div class="content_item1">
        <div>本月完成服务单数：</div>
        <div>{$row.end_service_num}</div>
      </div>
      <div class="content_item1">
        <div>今日服务单数：</div>
        <div>{$row.today_end_service_num}</div>
      </div>
      <div class="content_item1">
        <div>状态：</div>
        <div>{$row.status_text}</div>
      </div>
    </div>

    <ul class="self_tab-header">
      <li class="active">基本信息</li>
      <li>实名认证</li>
      <li>账户信息</li>
      <li>银行卡信息</li>
    </ul>
    <div class="self_tab-content active">
<!--    //  Tab 1 Content-->
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          姓名：
        </div>
        <div class="self_tab-content-item-detail">
          {$row.cleaner_name}
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          联系电话：
        </div>
        <div class="self_tab-content-item-detail">
          {$row.phone}
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          所在地区：
        </div>
        <div class="self_tab-content-item-detail">
          {$row.address}
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          派单地址：
        </div>
        <div class="self_tab-content-item-detail">
          {$row.housing}
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          注册时间：
        </div>
        <div class="self_tab-content-item-detail">
          {$row.add_time}
        </div>
      </div>
    </div>
    <div class="self_tab-content">
      Tab 2 Content
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          姓名：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          联系电话：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          所在地区：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          派单地址：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          注册时间：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
    </div>
    <div class="self_tab-content">
      Tab 3 Content
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          姓名：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          联系电话：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          所在地区：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          派单地址：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          注册时间：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
    </div>
    <div class="self_tab-content">
      Tab 4 Content
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          姓名：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          联系电话：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          所在地区：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          派单地址：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
      <div class="self_tab-content-item">
        <div class="self_tab-content-item-name">
          注册时间：
        </div>
        <div class="self_tab-content-item-detail">
          xxxxx
        </div>
      </div>
    </div>

  </div>
</form>
<script>
	const tabHeaders = document.querySelectorAll('.self_tab-header li');
	const tabContents = document.querySelectorAll('.self_tab-content');

	for (let i = 0; i < tabHeaders.length; i++) {
	  tabHeaders[i].addEventListener('click', function() {
	    // 隐藏所有内容
	    for (let j = 0; j < tabContents.length; j++) {
	      tabContents[j].classList.remove('active');
	    }
	    // 显示点击的内容
	    tabContents[i].classList.add('active');
	    // 取消选中状态
	    for (let j = 0; j < tabHeaders.length; j++) {
	      tabHeaders[j].classList.remove('active');
	    }
	    // 添加选中状态
	    tabHeaders[i].classList.add('active');
	  });
	}
</script>
<style>
  .form_box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .title1,.title2{
    width: 100%;
    font-weight: bold;
  }
  .title1{
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
  }
  .title2{
    background-color: rgb(215,215,215);
    display: flex;
    align-items: center;
  }
  .title2_text{
    margin: 10px 30px;
  }


  .content_box1{
    margin-top: 30px;
    width: 90%;
    display: flex;flex-wrap: wrap;
    border: 1px solid rgb(179,179,179);
    border-radius: 10px;
  }
  .content_item1{
    width: 21%;
    margin: 20px 2%;
    display: flex;
    align-items: center;
  }
  .content_item2{
    width: 33%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .content_item3{
    width: 25%;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
  }
  .content_item4{
    width: 50%;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
  }
  .content_item1_img{
    margin: 0 20px;
    max-width: 150px;
    max-height: 150px;
  }
  .btn_box{
    margin: 20px 0;
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .self_tab-header{
    width: 90%;
    padding: 0;
    margin: 20px 0;
  }
  .self_tab-header li {
    display: inline-block;
    padding: 10px 20px;
    background-color: #eee;
    cursor: pointer;
  }

  .self_tab-header li.active {
    background-color: #ccc;
  }

  .self_tab-content {
    width: 90%;
    display: none;
    padding: 10px;
  }
  .self_tab-content-item{
    display: flex;
    margin-bottom: 10px;
  }
  .self_tab-content-item div{
    color: #999;
  }
  .self_tab-content-item-name{
    width: 8%;
    text-align: right;
    white-space: nowrap;
  }
  .self_tab-content-item-detail{

  }
  .self_tab-content.active {
    display: block;
  }

</style>